<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="author" content="Lsc">
    <script src="../jq/jquery-3.1.1.js"></script>
    <title>图片翻转切换</title>
    <style>
        * {
            box-sizing: border-box;
        }
        
        .outer {
            width: 350px;
        }
        
        header {
            width: 350px;
            text-align: center;
            font-weight: bold;
            border: 1px solid gray;
            padding: 10px 0;
            font-size: 15px;
        }
        ul,li{
            margin: 0;
            padding: 0;
            list-style: none;
            display: inline-block;
        }
        .inner {
            width: 350px;
            border: 1px solid gray;
            text-align: center;
            padding-bottom: 10px;
        }
        .inner li{
            position: relative;
            width: 120px;
            height: 75px;
        }
        
        .inner img {
             position: absolute;
            border: 1px solid lightgray;
            margin-top: 10px;
            cursor: pointer;
            width: 120px;
            height: 75px;
            top: 0;
            left: 0;
        }
        
        .inner span {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 40px;
            left: 0;
            width: 120px;
            height: 0;
            color: white;
            background-color: orange;
            text-align: center;
            cursor: pointer;
            opacity: 0;
        }
    </style>
</head>

<body>
    <section class="outer">
        <header>
            热门品牌推荐
        </header>
        <ul class="inner">
            <li>
                <img src="images/11.jpg" alt="">
                <span>肌龄</span>
            </li>
            <li>
                <img src="images/22.jpg" alt="">
                <span>肌龄</span>
            </li>
            <li>
                <img src="images/33.jpg" alt="">
                <span>肌龄</span>
            </li>
            <li>
                <img src="images/44.jpg" alt="">
                <span>肌龄</span>
            </li>
            <li>
                <img src="images/55.jpg" alt="">
                <span>肌龄</span>
            </li>
            <li>
                <img src="images/66.jpg" alt="">
                <span>肌龄</span>
            </li>
            <li>
                <img src="images/77.jpg" alt="">
                <span>肌龄</span>
            </li>
            <li>
                <img src="images/88.jpg" alt="">
                <span>肌龄</span>
            </li>
        </ul>
    </section>

</body>

</html>
<script>
// 当鼠标进入li 
      $('.inner li').hover(function(){
        //   让图片高度设置为0 top为40 透明度该为0
         $(this).find('img').stop().animate({
             height:0,
             top:40,
             opacity: 0
         },200)
        //  让图片文字高度设置为75 top为10 透明度为1
          $(this).find('span').stop().animate({
             height:75,
             top:10,
             opacity: 1
         },300)
      },function(){
        //   鼠标离开时 将图片和文字该为初始值
          $(this).find('img').stop().animate({
             height:75,
             top:0,
              opacity: 1
         },300)
          $(this).find('span').stop().animate({
             height:0,
             top:40,
             opacity: 0
         },200)
      });
</script>